<template>
  <view class="com-row com-cross-center" :style="[this.toolbarStyle]">
    <slot name="navigation">
      <a-icon class="com-press-icon com-margin-hor-5" src="/static/common/image/icon_arrow_back_dark.png" @tap.stop="back"/>
    </slot>
    <view v-if="title" class="com-column com-expanded" style="padding-right: 10px">
      <view class="title u-line-1" :style="[{color:titleColor}]">{{ title }}</view>
      <view class="subTitle u-line-1" :style="[{color:titleColor}]" v-if="subTitle">{{ subTitle }}</view>
    </view>
    <slot name="custom"/>
    <slot name="menu"/>
    <view :style="[{paddingRight:safeRight}]"/>
  </view>
</template>

<script>
import AIcon from "./a-icon";

export default {
  name: "a-toolbar",
  components: {AIcon},
  computed: {
    toolbarStyle() {
      let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let capsule = uni.getMenuButtonBoundingClientRect()
      return {
        width: '100%',
        height: capsule.height + (capsule.top - statusBarHeight) * 2 + "px",
        backgroundColor: this.bgColor
      }
    },
    safeRight() {
      let windowWidth = uni.getSystemInfoSync().windowWidth
      let capsule = uni.getMenuButtonBoundingClientRect()
      return capsule.width + (windowWidth - capsule.right) * 2 + "px"
    }
  },
  props: {
    bgColor: {
      type: String,
      default: () => {
        return "#f3f4f6"
      }
    },
    title: {
      type: String,
      default: () => {
        return ""
      }
    },
    subTitle: {
      type: String,
      default: () => {
        return ""
      }
    },
    titleColor: {
      type: String,
      default: () => {
        return "#222222"
      }
    },
  },
  methods: {
    back() {
      uni.navigateBack({})
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: $font20;
}

.subTitle {
  color: $color-font-dark;
  font-size: $font14;
}
</style>